<template>
<!-- 工程结算台账-外包方工程合同 -->
    <div class="base-page">
        <!-- 列表 -->
        <div class="right">
                <div class="top">
                     <div class="return">
                        <img class="returnImg"
                        src="@/assets/btn/cancelDelete.png"
                        @click="returnUpOneLevel"
                        >
                    </div>
                    <div class="butBox">
                        <button class="isButton" @click="bulletFrameEventAdd">新增</button>
                        <button class="isButton" @click="bulletFrameEventTable">结算单据列表</button>
                    </div>
                    <span class="label leftSpacing">查看清单维度：</span>
                    <div class="radioBox">
                        <el-radio-group v-model="structure">
                            <el-radio label="1">细目维度</el-radio>
                            <el-radio label="2">结构部位维度</el-radio>
                        </el-radio-group>
                    </div>
                     <span class="label leftSpacing">期数:</span>
                        <div class="selectBox">
                                <el-select
                                    multiple
                                    v-model="qishu"
                                    collapse-tags
                                    placeholder="请选择"
                                    @change="onSelectQishu"
                                >
                                <el-option
                                    v-for="item in qishuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                </el-select>
                        </div>
                        <div class="searchBox">
                            <el-input class="ipt" type="text"
                            placeholder="输入关键字"
                            v-model="keyword"
                            @select="onSearch"
                            @change="onSearch"
                            @keyup.native.enter="onSearch"
                            ><img src="@/assets/search.png" slot="suffix" @click="onSearch" />
                            </el-input>
                        </div>
                <el-dialog :visible.sync="bulletFrameAdd" >
                    <div class="dialogBox">
                   <el-button type="primary" @click="goToProject(3)">新增其他结算</el-button>
                   <el-button type="primary" @click="goToProject(5)">新增加扣款结算</el-button>
                    </div>
                </el-dialog>
                </div>
                <!-- 表格清单 -->
                   <div class="e-tree-table">
                            <!-- default-expand-all 默认展开全部 -->
                            <el-table
                                :data="acceptanceData"
                                border
                                ref="acceptanceDataTable"
                                style="width: 100%"
                                :header-cell-style="{ textAlign: 'center' }"
                                :cell-style="{ textAlign: 'center' }"
                                :tree-props="{
                                    children: 'children',
                                    hasChildren: 'hasChildren'
                                }"
                                lazy
                                :load="onload"
                                row-key="uuid"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                v-sortTable="{ 'tableData': acceptanceData, '_this': this, 'ref': 'acceptanceDataTable' }"
                            >
                                <el-table-column
                                    prop="itemNo"
                                    label="细目编号"
                                    fixed
                                    min-width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="itemName"
                                    label="细目名称"
                                    fixed
                                    min-width="150"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="structureName"
                                    label="结构部位"
                                    min-width="150"
                                >
                                    <template slot-scope="{row}">
                                    <span v-if='row.type=="1"||row.type=="2"'>
                                         {{row.structureName}}
                                    </span>
                                    <span v-else>
                                       --
                                    </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                    prop="unit"
                                    label="单位"
                                    min-width="150"
                                >
                                    <template slot-scope="{row}">
                                    <span v-if='row.type=="1"||row.type=="2"'>
                                         {{row.unit}}
                                    </span>
                                    <span v-else>
                                       --
                                    </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                    prop="contractQuantity"
                                    label="合同数量"
                                    min-width="150"
                                >
                                    <template slot-scope="{row}">
                                    <span v-if='row.type!="3"'>
                                         {{row.contractQuantity}}
                                    </span>
                                    <span v-else>
                                       --
                                    </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                    label="合同单价"
                                    min-width="150"
                                    prop="contractPrice"
                                >
                                    <template slot-scope="{row}">
                                    <span v-if='row.type=="1"||row.type=="2"'>
                                         {{row.contractPrice}}
                                    </span>
                                    <span v-else>
                                       --
                                    </span>
                                </template>
                                </el-table-column>
                                 <el-table-column
                                    label="合同金额"
                                    min-width="150"
                                    prop="contractAmount"
                                >
                                    <template slot-scope="{row}">
                                    <span v-if='row.type !="3"'>
                                         {{row.contractAmount}}
                                    </span>
                                    <span v-else>
                                       --
                                    </span>
                                </template>
                                </el-table-column>
                                <el-table-column
                                    label="本期结算数量"
                                    min-width="200"
                                    prop="settlementQuantity"
                                >
                                   <template slot-scope="{ row }">
                                        <span v-if="row.type==4">
                                          {{treeUpSummary(row,'settlementQuantity',4)}}%
                                        </span>
                                          <span v-else-if="row.type==1">
                                          {{treeUpSummary(row,'settlementQuantity',4)}}
                                        </span>
                                        <span v-else>--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="本期结算金额(元)"
                                    min-width="150"
                                    prop="settlementAmount"
                                >
                                <template slot-scope="{ row }">
                                        <span>
                                        {{treeUpSummary(row,'settlementAmount')}}
                                        </span>
                                </template>
                                </el-table-column>
                                <!-- 第一期到第x期不包含本期数量 -->
                                <el-table-column
                                    v-for="item in dynamicLoadingLable"
                                    :label="item.label"
                                    min-width="150"
                                    :prop="item.prop"
                                    :key="item.id"
                                >
                                </el-table-column>

                                <el-table-column
                                    label="截止上期末累计结算数量"
                                    min-width="200"
                                    prop="prevTotalQuantity"
                                >
                                 <template slot-scope="{ row }">
                                 <span v-if="row.type==4">
                                    {{treeUpSummary(row,'prevTotalQuantity',4)}}%
                                </span>
                                 <span v-else-if="row.type==1">
                                    {{treeUpSummary(row,'prevTotalQuantity',4)}}
                                </span>
                                <span v-else>--</span>
                                </template>
                                </el-table-column>

                                <el-table-column
                                    label="截止上期末累计结算金额"
                                    min-width="200"
                                    prop="prevTotalAmount"
                                >
                                <template slot-scope="{ row }">
                                     {{treeUpSummary(row,'prevTotalAmount')}}
                                </template>
                                </el-table-column>

                                <el-table-column
                                    label="截止本期末累计结算数量"
                                    min-width="200"
                                    prop="currentTotalSettlementQuantity"
                                >
                                <template slot-scope="{ row }">
                                <span v-if="row.type==4">
                                    {{treeUpSummary(row,'currentTotalSettlementQuantity',4)}}%
                                </span>
                                 <span v-else-if="row.type==1">
                                    {{treeUpSummary(row,'currentTotalSettlementQuantity',4)}}
                                </span>
                                <span v-else>--</span>
                                </template>
                                </el-table-column>

                                <el-table-column
                                    label="截止本期末累计结算金额"
                                    min-width="200"
                                    prop="currentTotalSettlementAmount"
                                >                                                    <template slot-scope="{ row }">
                                     {{treeUpSummary(row,'currentTotalSettlementAmount')}}
                                </template>
                                </el-table-column>
                            </el-table>
                        </div>
                <!-- echarts图表 -->
                <div class="echartsBox">
                     <!-- 折线图 -->
                     <div class="lineChartBox" ref="lineChartRef" id="lineChart"></div>
                      <!-- 饼图 -->
                     <div class="pieChartBox" ref="pieChartRef"  id="pieChart"></div>
                </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
// openAppClient
import { getUuid } from '@/utils/common'
import httpRequest from '@/api/settlementManagement/otherSettlement/otherSettlement'
import * as echarts from 'echarts'
export default {
    props: {
        contractType: {
            type: Number,
            default: 2
        },
    },
    data () {
        return {
            //搜索
            keyword: '',
            //工程基本信息
            formData: {},
            //表格数据
            tableData: [],
            //总条数
            total: 0,
            //清单维度
            structure: '1',
            //期数数组
            qishuOptions: [],
            //选中期数
            qishu: [],
            //清单类型选择
            qingdanRange: 'all',
            //保存修改之前的老数据
            oldQishu: [],
            //结算清单明细
            acceptanceData: [],
            //工程内容
            projectContent: {
                serialNumber: 1,
                children: [], //子集数组
                settlementAmount: 0, //本期结算金额
                prevTotalAmount: 0, //截止上期末累计结算金额
                currentTotalSettlementAmount: 0, //截止本期末累计结算金额
                itemName: '合同工程内容', //细目名称 扩大基础"
                type: 1, //结算清单类型(1:清单;3:加扣款;4:保证金)
                uuid: getUuid(), //表格需要的id
                itemId: '1', //每个父级的id
            },
            //加扣款
            plusDeduction: {
                serialNumber: 2,
                children: [], //子集数组
                settlementAmount: 0, //本期结算金额
                prevTotalAmount: 0, //截止上期末累计结算金额
                currentTotalSettlementAmount: 0, //截止本期末累计结算金额
                itemName: '加扣款', //细目名称 扩大基础"
                type: 3, //结算清单类型(1:清单;3:加扣款;4:保证金)
                uuid: getUuid(), //表格需要的id
                itemId: '2', //每个父级的id
            },
            //税金
            taxes: {
                serialNumber: 3,
                children: [], //子集数组
                settlementAmount: 0, //本期结算金额
                prevTotalAmount: 0, //截止上期末累计结算金额
                currentTotalSettlementAmount: 0, //截止本期末累计结算金额
                itemName: '税金', //细目名称 扩大基础"
                type: 2, //结算清单类型(1:清单;3:加扣款;4:保证金)
                uuid: getUuid(), //表格需要的id
                itemId: '3', //每个父级的id
            },
            //保证金
            bond: {
                serialNumber: 4,
                children: [], //子集数组
                settlementAmount: 0, //本期结算金额
                prevTotalAmount: 0, //截止上期末累计结算金额
                currentTotalSettlementAmount: 0, //截止本期末累计结算金额
                itemName: '保证金', //细目名称 扩大基础"
                type: 4, //结算清单类型(1:清单;3:加扣款;4:保证金)
                uuid: getUuid(), //表格需要的id
                itemId: '4', //每个父级的id
            },
            //不含税结算价合计
            noTaxesTotalSettlement: {
                itemName: '不含税结算价合计', //细目名称 扩大基础"
                uuid: getUuid(), //表格需要的id
                itemId: '5', //每个父级的id
            },
            //含税结算价合计
            taxesTotalSettlement: {
                itemName: '含税结算价合计', //细目名称 扩大基础"
                uuid: getUuid(), //表格需要的id
                itemId: '6', //每个父级的id
            },
            //结算合计
            totalSettlement: {
                itemName: '结算合计', //细目名称 扩大基础"
                uuid: getUuid(), //表格需要的id
                itemId: '7', //每个父级的id
            },
            //单据id
            billid: '',
            //折线图数据
            lineChartObj: {},
            //折线图容器
            lineChartDom: null,
            //饼图数据
            pieChartObj: {},
            //饼图容器
            pieChartDom: null,
            //新增按钮开关
            bulletFrameAdd: false,
        }
    },
    created () {
        // this.billId = this.$route.query.billid
        this.billid = '1572790571764477954'
    },
    mounted () {
        this.getData ()
        this.lineChartDom = echarts.init(this.$refs.lineChartRef)
        this.pieChartDom = echarts.init(this.$refs.pieChartRef)
        this.setEchartsLineChart()
        this.setEchartsPieChart()
    },
    computed: {
        //根据选中期数动态展示表格
        dynamicLoadingLable () {
            const list =  []
            this.qishu.forEach(item=>{
                if(item) {
                    const obj1 = {
                        label: `第${item}期结算金额`,
                        prop: `settlementAmount${item}`,
                        id: getUuid()
                    }
                    const obj2 = {
                        label: `第${item}期结算数量`,
                        prop: `settlementQuantity${item}`,
                        id: getUuid()
                    }
                    list.push(obj1, obj2)
                }
            })
            return list
        },
    },
    watch: {
        //监听合同工程内容更新不含税结算价合计
        projectContent: {
            deep: true,
            handler (newVal) {
                this.setTotalSettlement([this.plusDeduction,  newVal], this.noTaxesTotalSettlement)
                this.setTotalSettlement([this.plusDeduction,  this.taxes, newVal], this.taxesTotalSettlement)
                this.setTotalSettlement([this.plusDeduction,  this.taxes, this.bond, newVal], this.totalSettlement)
            }
        },
        //监听加扣款更新
        plusDeduction: {
            deep: true,
            handler (newVal) {
                this.setTotalSettlement([newVal, this.projectContent], this.noTaxesTotalSettlement)
                this.setTotalSettlement([newVal,  this.taxes, this.projectContent], this.taxesTotalSettlement)
                this.setTotalSettlement([newVal,  this.taxes, this.bond, this.projectContent], this.totalSettlement)
            }
        },
        //监听税金更新含税结算价合计
        taxes: {
            deep: true,
            handler (newVal) {
                this.setTotalSettlement([this.projectContent, this.plusDeduction, newVal], this.taxesTotalSettlement)
                this.setTotalSettlement([this.projectContent, this.plusDeduction, newVal], this.totalSettlement)
            }
        },
        //监听保证金更新结算合计
        bond: {
            deep: true,
            handler (newVal) {
                this.setTotalSettlement([this.projectContent, this.plusDeduction,  this.taxes, newVal], this.totalSettlement)
            }
        }
    },
    methods: {
        //获取数据
        getData () {
            Promise.all([
                this.getInfo(),
                this.getInfoDetailed(),
            ])
        },
        //搜索
        onSearch () {},
        //设置echarts折线图
        setEchartsLineChart () {
            const series = []
            const legend = ['本期结算金额', '完成产值', '当前金额', '截止本期末累计结算金额']
            const color = ['#EE6666', '#5470C6', '#91CC75', '#FAC858']
            //随机初始化折线图
            for (let i = 0; i < 4; i++) {
                const obj = {
                    name: legend[i],
                    data: this.setEchartsSeriesData(),
                    type: 'line',
                    stack: 'Total',
                    itemStyle: {
                        color: color[i]
                    }
                }
                series.push(obj)
            }
            this.lineChartDom.setOption({
                title: {
                    text: '结算趋势图',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend,
                    top: '5%',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '20%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series
            })
        },
        //设置echarts饼图
        setEchartsPieChart () {
            const data = []
            const legend = ['预付款金额', '合同清单金额', '加扣款金额', '保证金合计']
            //随机初始化折线图
            for (let i = 0; i < 4; i++) {
                const obj = {
                    value: parseInt(Math.random() * 1000),
                    name: legend[i],
                    label: {
                        color: '#000000'
                    }
                }
                data.push(obj)
            }
            this.pieChartDom.setOption({
                series: [
                    {
                        type: 'pie',
                        radius: '40%',
                        data,
                        color: ['#EE6666', '#5470C6', '#91CC75', '#FAC858'],
                    }
                ]
            })
        },
        //获取Echarts随机数
        setEchartsSeriesData () {
            const list = []
            for (let i = 0; i < 5; i++) {
                const random = parseInt(Math.random() * 1000)
                list.push(random)
            }
            list.sort((a, b)=>a - b)
            return list
        },
        //新增按钮弹框事件
        bulletFrameEventAdd () {
            this.bulletFrameAdd = true
        },
        //结算单据列表弹框事件
        bulletFrameEventTable () {
            this.$router.replace({
                path: '/settlementDocList',
                query: {
                    contractType: this.contractType,
                }
            })
        },
        //前往工程指定模块的新增页面
        goToProject (type) {
            const obj = {
                1: '/guochengJieshuanAdd', // 过程
                2: '/guochengZqJieshuanAdd', // 终期
                3: '/otherSettlementAdd', // 其他
                4: '/baozhengjinAdd', // 保证金
                5: '/guochengJkkJieshuanAdd', // 加扣款
            }
            this.$router.replace({
                path: obj[type]
            })
        },
        //返回上一级
        returnUpOneLevel () {
            this.$router.push({
                path: '/projectSettlementAccountOutsourcerContract'
            })
        },
        //--------------------下面是工程结算清单的方法----------------//
        //加法运算并保留任意位小数
        summationResToOrFourDecimal (a, b, decimal = 2) {
            return ((Number(a) || 0) + (Number(b) || 0)).toFixed(decimal) * 1
        },
        //树向上汇总row为当前数据,key为需要计算的属性
        treeUpSummary (row, key) {
            if(row.children && row.children.length > 0 ) {
                row[key] = row.children.reduce((count, item)=>count + (Number(item[key]) || 0), 0).toFixed(2) * 1
            }
            return row[key]
        },
        //设置本期之前的所有期数
        setHistoryPeriods (peridos) {
            const periodsList = [{ label: '全部', value: 0 }] //第一条数据默认全部
            for (let i = 1; i <= peridos; i++) {
                const obj = {
                    label: `第${i}期`,
                    value: i
                }
                periodsList.push(obj)
            }
            const valueList = periodsList.map(item => item.value)
            this.qishuOptions = periodsList
            this.qishu = valueList
            this.oldQishu = valueList
        },
        //设置历史期数
        setTableHistoryPeriods (obj, list) {
            let max = 0 // 最大期数
            let totalAmount = 0 //累计金额
            let totalQuantity = 0 // 累计数量
            //税金参数（税金与其他的结算类型一起返回需要单独找出税金）
            let taxesMax = 0
            let taxesTotalAmount = 0
            const taxeObj = {}
            list.forEach(item=>{
                //税金type等于5没有就是目标
                if(item.type == 5) {
                    const p = item.period
                    taxeObj['settlementAmount' + p] = item.settlementAmount || 0
                    taxesTotalAmount += Number(item.settlementAmount)
                    taxesMax = Math.max(taxesMax, p)
                }else {
                    const p = item.period
                    obj['settlementAmount' + p] = item.settlementAmount || 0
                    if(obj.type == 4) {
                        obj['settlementQuantity' + p] = item.settlementQuantity ? item.settlementQuantity + '%' : '0%'
                    }else {
                        obj['settlementQuantity' + p] = item.settlementQuantity || 0
                    }
                    totalAmount += Number(item.settlementAmount)
                    totalQuantity += Number(item.settlementQuantity)
                    max = Math.max(max, p)
                }
            })
            totalAmount = totalAmount.toFixed(2) * 1
            totalQuantity = totalQuantity.toFixed(4) * 1
            taxesTotalAmount = taxesTotalAmount.toFixed(2) * 1
            const arr = [
                { type: 'target', max, totalAmount, totalQuantity, other: {} },
                { type: 'taxes', max: taxesMax, totalAmount: taxesTotalAmount, totalQuantity: '', other: taxeObj
                }]
            return arr
        },
        //获取基本信息数据查看页面
        getInfo () {
            // 获取基本信息 tps
            httpRequest.getOtherSettlementBasicInformationData({ id: this.billid })
                .then(res=>{
                    this.formData = { ...res }
                    //获取合同截止上期末累计结算金额
                    httpRequest.getPreviousTotalAmount({ contractId: res.contractId })
                        .then(data=>{
                            if(typeof data == 'number') {
                                this.formData.previousTotalAmount = data
                            }else {
                                this.formData.previousTotalAmount = 0
                            }
                        })
                })
        },
        //获取历史数据
        async getHistoryData (item) {
            const resLine = await httpRequest.getOtherSettlementDetailedHistoryData({
                'contractId': this.formData.contractId,
                'dtls': [
                    {
                        'marginType': item.marginType,
                        'sourceId': item.sourceId,
                        'structureId': item.structureId,
                        'type': item.type
                    }
                ],
                'orgId': this.formData.orgId,
                'period': this.formData.period || 1
            })
            return this.setTableHistoryPeriods(item, resLine)
        },
        //获取明细数据仅限父级
        getInfoDetailed () {
            httpRequest.getOtherSettlementDetailedData({ billId: this.billid, parentId: '0' }).then( res=>{
                if(res.length > 0) {
                    res.forEach(item=>{
                        Object.assign(item, { children: [], hasChildren: [], uuid: getUuid() })
                    })
                    const projectContentList = res.filter(item=>item.type == 1)
                    const plusDeductionList = res.filter(item=>item.type == 3)
                    const bondList = res.filter(item=>item.type == 4)
                    const plusDeductionTree =  this.listConversionTreeOther(plusDeductionList, '0', 0)
                    const bondTree =  this.listConversionTreeOther(bondList, '0', 0)
                    this.projectContent.children = projectContentList
                    this.plusDeduction.children = plusDeductionTree
                    this.bond.children = bondTree
                    this.taxes.settlementAmount = this.formData.taxAmount
                    this.taxes.currentTotalSettlementAmount = this.formData.taxAmount + this.taxes.prevTotalAmount
                    this.acceptanceData.push(this.projectContent, this.plusDeduction, this.taxes, this.bond, this.noTaxesTotalSettlement, this.taxesTotalSettlement, this.totalSettlement)
                }
            })
        },
        //获取子级的数据
        async getChildrenInfo (thisLevelId) {
            const res = await httpRequest.getOtherSettlementDetailedData({ billId: this.billid, parentId: thisLevelId })
            for (const key in res) {
                Object.assign(res[key], { children: [], hasChildren: true, uuid: getUuid() })
                if(res[key].isDetailed == 1) {
                    const targetList = await this.getHistoryData(res[key])
                    //当单位为总额时数量从施工日报带入
                    if(this.formData.contractTypeValue == '1' && res[key].unit != '总额' && res[key].type == 1) {
                        const targetProjectLog = await this.getListCanSettleQuantity(res[key])
                        // res[key].settlementQuantity = Number(targetProjectLog[0].sumQty) || 0
                        res[key].settlementAmount = parseInt((res[key].settlementQuantity * (res[key].contractPrice || 0)))
                        res[key].currentTotalSettlementQuantity = ((Number(res[key].prevTotalQuantity) || 0) + (Number(res[key].settlementQuantity) || 0)).toFixed(4) * 1
                        res[key].currentTotalSettlementAmount = (Number(res[key].settlementAmount) || 0) + (Number(res[key].prevTotalAmount) || 0)
                        //保存当前可结算施工量
                        res[key].projectLog = Number(targetProjectLog[0].sumQty) || 0
                    }
                    let totalQuantity = 0
                    let totalAmount = 0
                    let max = 0
                    targetList.forEach(item=>{
                        //目标
                        if(item.type == 'target') {
                            totalQuantity = item.totalQuantity || 0
                            totalAmount = item.totalAmount || 0
                            max = item.max
                            const currentTotalSettlementAmount = this.summationResToOrFourDecimal(item.totalAmount, res[key].settlementAmount)
                            const currentTotalSettlementQuantity = this.summationResToOrFourDecimal(item.totalQuantity, res[key].settlementQuantity, 4)
                            Object.assign(res[key], { children: [], hasChildren: false,  prevTotalQuantity: totalQuantity, prevTotalAmount: totalAmount, currentTotalSettlementAmount, currentTotalSettlementQuantity })
                            this.setHistoryPeriods(max)
                        }else {
                            const currentTotalSettlementAmount = this.summationResToOrFourDecimal(item.totalAmount, this.taxes.settlementAmount)
                            //税金
                            Object.assign(this.taxes, { prevTotalAmount: item.totalAmount, currentTotalSettlementAmount, ...item.other })
                            this.setHistoryPeriods(item.max)
                        }

                    })

                }
            }
            return res
        },
        //懒加载数据
        async onload (row, treeNode, resolve) {
            let result = []
            if(row.children.length > 0) {
                result = row.children
            }else{
                if(row.isDetailed != 1) {
                    try {
                        result = await this.getChildrenInfo(row.thisLevelId) //本级id
                    } catch (error) {
                        result = []
                    }
                }
            }
            row.children = result
            if(result.length == 0) {
                row.lowestChild = true
            }
            resolve(result)
        },
        //将加扣款、保证金转为需要的树
        listConversionTreeOther (arr, parentId) {
            const tree = []
            let temp
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].parentId == parentId) {
                    arr[i].uuid = getUuid()
                    const obj = arr[i]
                    temp = this.listConversionTreeOther(arr, arr[i].thisLevelId)
                    if (temp.length > 0) {
                        obj.children = temp
                    } else {
                        obj.children = []
                        obj.lowestChild = true
                        obj.settlementAmount = obj.settlementAmount || 0
                        obj.prevTotalAmount = obj.prevTotalAmount || 0
                        obj.currentTotalSettlementAmount = obj.currentTotalSettlementAmount || 0
                    }
                    tree.push(obj)
                }
            }
            return tree
        },
        //切换清单事件
        selectionList (val) {
            let res = []
            if(val == 'all') {
                const list = []
                this.qishuOptions.forEach(item=>{
                    list.push(item.value)
                })
                res = list
            }
            this.qishu = res
        },
        //修改期数
        onSelectQishu (e) {
            let difference
            // 选中
            if (e.length > this.oldQishu.length) {
                difference = e.find(item => this.oldQishu.indexOf(item) === -1)
                // 选中 “全部”时
                if (difference === 0) {
                    this.qishu = this.qishuOptions.map(item => item.value)
                } else {
                    // 如果选中项数为 除了 “全部” 外的所有
                    if (e.length === this.qishuOptions.length - 1) {
                        this.qishu = this.qishuOptions.map(item => item.value)
                    }
                }
            } else {
                // 取消
                difference = this.oldQishu.find(item => e.indexOf(item) === -1)
                if (difference === 0) {
                    this.qishu = []
                } else {
                    // 如果取消之前是全部选中，则取消选中 “全部”
                    if (this.oldQishu.length === this.qishuOptions.length) {
                        this.qishu.splice(0, 1)
                    }
                }
            }
            this.oldQishu = this._.clone(this.qishu)
        },
        //设置合计
        setTotalSettlement (list, target) {
            target['settlementAmount'] = list.reduce((a, b)=>a + (Number(b.settlementAmount) || 0), 0).toFixed(2) * 1
            target['prevTotalAmount'] = list.reduce((a, b)=>a + (Number(b.prevTotalAmount) || 0), 0).toFixed(2) * 1
            target['currentTotalSettlementAmount'] = list.reduce((a, b)=>a + (Number(b.currentTotalSettlementAmount) || 0), 0).toFixed(2) * 1
        },

        //跳转至加扣款结算页面
        // examine (row) {
        //     const billId = row.dtlId
        //     openAppClient(
        //         `/guochengJkkJieshuanView?isview=true&billid=${billId}`, '查看加扣款结算'
        //     )
        // },
    }
}
</script>

<style lang="scss" scoped>
    .base-page{
      display: flex;
      justify-content: space-between;
      align-items: self-start;
      .left{
        width: 30%;
        padding: 0;
      }
      .right{
          width: 70%;
              .top {
                display: flex;
                justify-content: space-around;
                padding-left: 20px;
                .returnImg {
                    transform: rotateY(180deg);
                    cursor: pointer;
                }
                .butBox {
                    width: 18%;
                    display: flex;
                    justify-content: space-around;
                    .isButton {
                        background-color: rgb(46, 97, 215);
                        color: rgb(255, 255, 255);
                        font-size: 12px;
                        cursor: pointer;
                        font-weight: 500;
                        border: none;
                        height: 26px;
                        border-radius: 5px;
                    }
                }
                .radioBox {
                    width: 27%;
                }
                .selectBox {
                    width: 15%;
                }
                .searchBox {
                    width: 15%;
                }
        }
      }
    }
    ::v-deep .e-form .el-form-item .el-form-item__content{
        display: flex; align-items: center;
    }
    .leftSpacing {
        margin-left: 6px;
    }
    .echartsBox {
        width: 100%;
        height: 500px;
        padding-top: 20px;
        display: flex;
        background-color: #ffffff;
        .lineChartBox {
            flex: 1;
            height: 100%;
        }
        .pieChartBox {
            flex: 1;
            height: 100%;
        }
    }
    .dialogBox {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        padding-bottom: 40px;
    }

</style>
